<template>
  <w-view>
    <w-horizontal height="60">
      <w-html width="220" align="center" valign="middle" class="logo-text">
        <h3 class="header-nav">
          <router-link to="/">dfish-widget API</router-link>
        </h3>
      </w-html>
      <w-html width="*" style="background-color: #CAE0E6;"></w-html>
    </w-horizontal>
    <w-horizontal height="*">
      <w-tree ref="tree" :current="focusLeaf" width="220" :scroll-y="true"
        style="background-color: #CAE0E6;padding:5px 0;" :children="treeList">
        <template #default="{item}">
          <w-leaf :key="item.id" :text="item.text" :expanded="item.expanded" :children="item.children"
            @click="clickLeaf(item)" />
        </template>
      </w-tree>
      <router-view width="*" :scroll-y="true" style="padding: 0 20px"></router-view>
    </w-horizontal>

  </w-view>
</template>

<script>
  import $ from 'dfish-widget'

  export default {
    watch: {
      $route: 'routerChange'
    },
    data() {
      return {
        tmpl: 'Welcome',
        focusLeaf: '',
        treeList: [{
            text: '辅助方法',
            expanded: !true,
            children: [{
              id: '$.dfish',
              text: '$'
            }, {
              id: '$.ajax',
              text: '$.ajax'
            }, {
              id: '$.ajax.delete',
              text: '$.ajax.delete'
            }, {
              id: '$.ajax.get',
              text: '$.ajax.get'
            }, {
              id: '$.ajax.post',
              text: '$.ajax.post'
            }, {
              id: '$.ajax.put',
              text: '$.ajax.put'
            }, {
              id: '$.alert',
              text: '$.alert'
            }, {
              id: '$.br',
              text: '$.br'
            }, {
              id: '$.cloneDeep',
              text: '$.cloneDeep'
            }, {
              id: '$.config',
              text: '$.config'
            }, {
              id: '$.confirm',
              text: '$.confirm'
            }, {
              id: '$.dateAdd',
              text: '$.dateAdd'
            }, {
              id: '$.dateDiff',
              text: '$.dateDiff'
            }, {
              id: '$.dateFormat',
              text: '$.dateFormat'
            }, {
              id: '$.dateParse',
              text: '$.dateParse'
            }, {
              id: '$.dateSheet',
              text: '$.dateSheet'
            }, {
              id: '$.download',
              text: '$.download'
            }, {
              id: '$.numAdd',
              text: '$.numAdd'
            }, {
              id: '$.numFormat',
              text: '$.numFormat'
            }, {
              id: '$.previewImage',
              text: '$.previewImage'
            }, {
              id: '$.previewVideo',
              text: '$.previewVideo'
            }, {
              id: '$.print',
              text: '$.print'
            }, {
              id: '$.q',
              text: '$.q'
            }, {
              id: '$.strFrom',
              text: '$.strFrom'
            }, {
              id: '$.strHighlight',
              text: '$.strHighlight'
            }, {
              id: '$.strTo',
              text: '$.strTo'
            }, {
              id: '$.urlParam',
              text: '$.urlParam'
            }, {
              id: '$.vm',
              text: '$.vm'
            }, {
              id: '$.WIDGET',
              text: '$.WIDGET'
            }, ]
          },
          {
            text: '样式图标',
            expanded: !true,
            children: [{
              id: '$.cssvar',
              text: '变量样式'
            }, {
              id: '#Fonticon',
              text: '字体图标'
            }, ]
          },
          {
            text: '自定义指令',
            expanded: !true,
            children: [{
              id: 'v-form-ignore',
              text: 'v-form-ignore'
            }, {
              id: 'v-dialog-move',
              text: 'v-dialog-move'
            }],
          },
          {
            text: '弹窗组件',
            expanded: !true,
            children: [
              {
                id: 'Alert',
                text: 'Alert'
              },
              {
                id: 'Confirm',
                text: 'Confirm'
              },
              {
                id: 'Dialog',
                text: 'Dialog'
              },
              {
                id: 'Loading',
                text: 'Loading'
              },
              {
                id: 'Menu',
                text: 'Menu'
              },
              {
                id: 'Tip',
                text: 'Tip'
              },
            ]
          },
          {
            text: '布局组件',
            expanded: !true,
            children: [{
                id: 'DocView',
                text: 'DocView'
              },
              {
                id: 'Horizontal',
                text: 'Horizontal'
              },
              {
                id: 'Grid',
                text: 'Grid'
              },
              {
                id: 'Swiper',
                text: 'Swiper',
                children: [{
                  id: 'SwiperItem',
                  text: 'SwiperItem'
                }, ]
              },
              {
                id: 'Table',
                text: 'Table',
                children: [{
                    id: 'TableColumns',
                    text: 'Columns'
                  },
                  {
                    id: 'TableColumn',
                    text: 'Column'
                  },
                  {
                    id: 'TableTBody',
                    text: 'TBody'
                  },
                  {
                    id: 'TableTHead',
                    text: 'THead'
                  },
                  {
                    id: 'TableTD',
                    text: 'TD'
                  },
                  {
                    id: 'TableTH',
                    text: 'TH'
                  },
                  {
                    id: 'TableTR',
                    text: 'TR'
                  },
                ]
              },
              {
                id: 'TableV2',
                text: 'TableV2'
              },              {
                id: 'Tabs',
                text: 'Tabs',
                children: [{
                  id: 'Tab',
                  text: 'Tab'
                }, ]
              },
              {
                id: 'Vertical',
                text: 'Vertical'
              },
              {
                id: 'View',
                text: 'View'
              },
            ]
          },
          {
            text: '功能组件',
            expanded: !true,
            children: [{
                id: 'Album',
                text: 'Album'
              },
              {
                id: 'ButtonBar',
                text: 'ButtonBar'
              },
              {
                id: 'Button',
                text: 'Button'
              },
              {
                id: 'Calendar',
                text: 'Calendar'
              },
              {
                id: 'Html',
                text: 'Html'
              },
              {
                id: 'Img',
                text: 'Img'
              },
              {
                id: 'Leaf',
                text: 'Leaf'
              },
              {
                id: 'Pagebar',
                text: 'Pagebar'
              },
              {
                id: 'Progress',
                text: 'Progress'
              },
              {
                id: 'SlidePicker',
                text: 'SlidePicker'
              },
              {
                id: 'Split',
                text: 'Split'
              },
              {
                id: 'Timeline',
                text: 'Timeline',
                children: [{
                  id: 'TimelineItem',
                  text: 'TimelineItem'
                }]
              },
              {
                id: 'Toggle',
                text: 'Toggle'
              },
              {
                id: 'Tree',
                text: 'Tree'
              },
              {
                id: 'TreeV2',
                text: 'TreeV2'
              },
              {
                id: 'Video',
                text: 'Video'
              },
            ]
          },
          {
            text: '表单组件',
            expanded: !true,
            children: [{
                id: 'Checkbox',
                text: 'Checkbox'
              },
              {
                id: 'CheckboxGroup',
                text: 'CheckboxGroup'
              },
              {
                id: 'Combobox',
                text: 'Combobox'
              },
              {
                id: 'Datepicker',
                text: 'Datepicker'
              },
              {
                id: 'Dropbox',
                text: 'Dropbox'
              },
              {
                id: 'Fileupload',
                text: 'Fileupload'
              },
              {
                id: 'Form',
                text: 'Form'
              },
              {
                id: 'Hidden',
                text: 'Hidden'
              },
              {
                id: 'Imageupload',
                text: 'Imageupload'
              },
              {
                id: 'Jigsaw',
                text: 'Jigsaw'
              },
              {
                id: 'Mediaupload',
                text: 'Mediaupload'
              },
              {
                id: 'Label',
                text: 'Label'
              },
              {
                id: 'Linkbox',
                text: 'Linkbox'
              },
              {
                id: 'Option',
                text: 'Option'
              },
              {
                id: 'Password',
                text: 'Password'
              },
              {
                id: 'Pickbox',
                text: 'Pickbox'
              },
              {
                id: 'Radio',
                text: 'Radio'
              },
              {
                id: 'RadioGroup',
                text: 'RadioGroup'
              },
              {
                id: 'Range',
                text: 'Range'
              },
              {
                id: 'Rate',
                text: 'Rate'
              },
              {
                id: 'Spinner',
                text: 'Spinner'
              },
              {
                id: 'Switch',
                text: 'Switch'
              },
              {
                id: 'Text',
                text: 'Text'
              },
              {
                id: 'Textarea',
                text: 'Textarea'
              },
              {
                id: 'Triplebox',
                text: 'Triplebox'
              },
            ]
          },
        ],
      }
    },
    methods: {
      clickLeaf(data) {
        if (data.id) {
          this.focusLeaf = data.id
          let path = data.id.startsWith('#') ? 'source/' + data.id.slice(1) :
            data.id.startsWith('$.') ? 'methods/' + data.id.slice(2) :
            data.id.startsWith('v-') ? 'directives/' + data.id :
            'widgets/' + data.id
          this.tmpl = path
          if (this.$router)
            this.$router.push('/' + path)
        }
      },
      routerChange() {
        if (this.$route) {
          let path = this.$route.path
          let id = $.strFrom(path, '/', true)
          if (path.includes('methods')) id = '$.' + id
          else if (path.includes('source')) id = '#' + id
          this.focusLeaf = id
          this.$nextTick(() => {
            this.$refs.tree.viewCurrent()
          })
        }
      }
    },
    mounted() {
      this.routerChange()
    }

  }
</script>

<style>
  .logo-text {
    background-color: #3C7483;
    color: #fff
  }

  .logo-text h3 {
    margin: 0
  }

  .header-nav a {
    color: #fff;
    text-decoration: none;
  }
</style>
